<template>
    <div>
        <el-row class="fen">
            <el-col :span="4">
                <span class="title"></span>退货列表
            </el-col>
            <el-col :span="6" :offset="14">
                <el-button size="small" @click="refresh"><i class="el-icon-refresh"></i>刷新</el-button>
                <el-button size="small"><i class="el-icon-arrow-left" @click="back"></i>返回</el-button>
            </el-col>
        </el-row>
        <el-row class="fen">
            <el-col :span="4">
                <i class="el-icon-search"></i>筛选查询
            </el-col>
            <!--            <el-col :span="2" :offset="16">-->
            <!--                <el-button size="small" @click="dialogFormVisible = true">高级检索</el-button>-->
            <!--            </el-col>-->
        </el-row>
        <el-row class="inputGroup">
            <el-col :span="4">服务编号：<el-input class="search" size="small" v-model="sealsReturn.serviceNo" @blur="search"  placeholder="请输入内容" autocomplete="off"></el-input></el-col>
            <el-col :span="4" >联系人：<el-input class="search" size="small" placeholder="请输入内容" v-model="sealsReturn.realname" autocomplete="off" @blur="search"></el-input></el-col>
            <el-col :span="4">联系电话：<el-input class="search" size="small" placeholder="请输入内容"  v-model.lazy="sealsReturn.telephone " autocomplete="off" @blur="search"></el-input></el-col>
            <el-col :span="6">申请时间：<el-date-picker type="date" class="search" size="small" v-model="sealsReturn.applicationTime" placeholder="请选择时间" autocomplete="off" @blur="search"></el-date-picker></el-col>
            <el-col :span="4" >申请状态：
                <el-select v-model="sealsReturn.applicationStatus" @change="changeStatus">
                    <el-option value="0" label="全部申请"></el-option>
                    <el-option value="7" label="待处理"></el-option>
                    <el-option value="8" label="退货中"></el-option>
                    <el-option value="9" label="已退货"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row class="fen">
            <i class="el-icon-menu">数据列表</i>

                <el-button size="small" @click="outData">导出数据</el-button>
        </el-row>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
        >
            <el-table-column
                    prop="serviceNo"
                    label="服务编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="applicationTime"
                    label="申请时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户账号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="refundAmount"
                    label="申请金额">
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="联系人"
                    >
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="联系方式"
                    >
            </el-table-column>
            <el-table-column
                    prop="applicationStatus"
                    label="申请状态"
                    :formatter="statusFormatter">
            </el-table-column>
            <el-table-column
                    prop="processingTime"
                    label="处理时间"
                    >
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <router-link to="/returnDetail"><el-button type="text" size="small" @click="check(scope.row)">查看详情</el-button></router-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[2,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import bus from './orderBus.js';
    export default {
        inject: ['reload'],
        name: "CancelTable",
        data(){
            return{
                tableData:[],
                row:'',
                currentPage: 1, // 当前页码
                total: 3, // 总条数
                pageSize: 2,
                formLabelWidth: '120px',
                sealsReturn: {
                    serviceNo:'',
                    userId:'',
                    realname:'',
                    telephone:'',
                    applicationTime:'',
                    applicationStatus:''
                },
            }
        },
        methods:{
            outData(){
                this.$http({method:'post',url:'/return/write'}).then(res=>{
                    this.$message(res.data.message);
                })
            },
            check(row) {
                this.$store.commit("changeRow", row)
            },

            sure() {
                this.getTableData(this.currentPage, this.pageSize);
            },
            search() {
                if (this.sealsReturn.serviceNo == null && this.sealsReturn.realname== null && this.sealsReturn.telphone == null && this.sealsReturn.applicationTime == null) {
                    return;
                } else {
                    this.getTableData(this.currentPage, this.pageSize);
                }
                // this.tableData=this.tableData2;
                // this.total=this.tableData2.length;
            },
            changeStatus() {
                //this.sealsReturn.applicationStatus = status;
                this.getTableData(this.currentPage, this.pageSize)

            },
            refresh() {
                this.reload();
            },
            back() {

                this.$router.back()
            },
            statusFormatter(row) {

                if (row.applicationStatus == 11) {
                    return '已拒绝'
                }
                if (row.applicationStatus == 7) {
                    return '退货申请'
                }
                if (row.applicationStatus == 8) {
                    return '退货中'
                }
                if (row.applicationStatus == 9) {
                    return '已退货'
                }
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getTableData(this.currentPage, this.pageSize)
            },
            getTableData(currentPage,pageSize){
                this.$http({
                    method: 'post',
                    url: "/order/getReturnList",
                    params: {page: currentPage, limit: pageSize},
                    data: this.sealsReturn
                }).then(res => {
                    this.tableData = res.data.data;
                    this.total=res.data.count;
                    this.sealsReturn.serviceNo='';
                    this.sealsReturn.userId='';
                    this.sealsReturn.realname='';
                    this.sealsReturn.telphone='';
                    this.sealsReturn.applicationTime='';
                    this.sealsReturn.applicationStatus='';
                })
            }
        },
        created() {
            this.getTableData(this.currentPage, this.pageSize)
        },
    }
    /*
    * private Integer returnId;
    private Integer serviceNo;
    private Integer orderNo;
    private Integer userId;
    private String realname;
    private String telephone;
    private BigDecimal refundAmount;
    private String application_status;
    private Date application_time;
    private Date processing_time;
    private String reason;
    private String problemDescribing;
    private String certificateImg;
    *
    * */
</script>

<style scoped>
    .el-input{
        width: 300px;
    }
    .el-select{
        width:128px
    }
    .search{
        width:130px ;
    }
    .fen{
        height: 50px;
        line-height: 50px;
        background-color: #F3F3F3;
    }
    .title{
        display: inline-block;
        width: 5px;
        height:10px;
        background-color: lightgreen;
    }
</style>